<template>

  <el-breadcrumb class="breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item :key="item.path" v-for="item in breadcrumb" :to="{ path: item.path }">{{generateTitle(item.meta.title)}}</el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>

</template>

<script setup>
import {watch,ref} from 'vue';
import {useRoute} from 'vue-router';
const route = useRoute();
const breadcrumb = ref([]);
import {generateTitle} from '@/utils/i18n';

watch(route,()=>{
  breadcrumb.value = route.matched.filter(e=>e.meta && e.meta.title);
},{
  immediate:true
});

</script>

<style lang="scss" scoped>
.breadcrumb{
  display: inline-block;
  font-size: 14px;
  margin-left: 8px;
}
</style>
